<%--
  Created by IntelliJ IDEA.
  User: 您的名字
  Version: 1.0
 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>EasyUI CRUD 示例页面</title>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <!-- 引入 EasyUI 的默认主题样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/bootstrap/easyui.css">
    <!-- 引入 EasyUI 的图标样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
    <!-- 引入自定义的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/common.css"/>
    <!-- 引入省市区的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/address.css"/>
    <!-- 引入 EasyUI 默认的 jQuery（无需单独引入 jQuery） -->
    <script src="static/js/easyui/jquery.min.js"></script>
    <!-- 引入 EasyUI 的核心 JS 文件 -->
    <script src="static/js/easyui/jquery.easyui.min.js"></script>
    <!-- 引入 EasyUI 的中文语言包 -->
    <script src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/common.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/dataGrid.js"></script>
    <!-- 引入省市区的公共脚本 -->
    <script src="static/js/owner/address.js"></script>
    <script src="static/js/owner/city_code.js"></script>
    <!-- 引入 moment.js 库，用于处理日期和时间 -->
    <script src="static/js/owner/moment.min.js"></script>
    <!-- daterangepicker 是一个日期范围选择插件，支持选择开始和结束日期 -->
    <link rel="stylesheet" href="static/css/daterangepicker.css">
    <!-- 引入 daterangepicker 的脚本文件 -->
    <script src="static/js/owner/daterangepicker.js"></script>
</head>

<body>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="init()">初始化</a>
<%--<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="reload()">刷新</a>--%>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="searchNode()">获取选中节点信息</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="searchAllNode()">获取所有节点信息</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="myExpandNode()">展开</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="isLeaf()">是否为叶子节点</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="appendNode()">添加子节点</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="removeNode()">移除节点</a>

<!-- 数据表格 -->
<table id="menuTreeGrid"></table>
</body>

<!-- 定义页面脚本 -->
<script type="text/javascript">
    const grid = '#menuTreeGrid';
    const $grid = $(grid);
    let initNode = [{id: 1, text: '赵志伟', age: 25}, {id: 2, text: '英雄', age: 3000}, {id: 3,text: '美国队长',age: 38}];
    let childNode = [{id: 101, text: '子节点1', age: 25}, {id: 102, text: '子节点2', age: 3000}, {id: 103,text: '子节点3',age: 38}];

    function init() {
        $grid.treegrid({
            data: initNode, // 数据接口
            idField: 'id',
            treeField: 'text',
            fitColumns: true,     // 启用列宽自动适配
            columns: [[
                {field: 'id', title: 'ID', width: 100},
                {field: 'text', title: '名称', width: 200},
                {field: 'age', title: '年龄', width: 100}
            ]],
            onClickRow: function () {
                myExpandNode();
            }
        });
    }

    function reload() {
        /*
        reload 方法： 如果 reload 方法没有传递特定的参数（如 URL 或数据），它通常会重新加载整个数据集。因为 reload 是用来刷新数据的，所以它会覆盖现有的所有数据。
        添加子节点： 在您执行 reload 后，子节点信息丢失了，因为表格被重新加载。即使您之前通过 appendNode 添加了子节点，这些子节点会在 reload 后被清除。
         */
        let selectedRow = $grid.treegrid('getSelected');
        $grid.treegrid('reload', selectedRow);
    }

    //获取选中节点信息
    function searchNode() {
        let selectedRow = $grid.treegrid('getSelected');
        alert(JSON.stringify(selectedRow))
    }

    //获取所有节点信息
    function searchAllNode() {
        let data = $grid.treegrid('getData');
        alert(JSON.stringify(data))
    }

    //展开
    function myExpandNode() {
        let selectedRow = $grid.treegrid('getSelected');
        if (selectedRow.state === 'closed') {//展开
            $grid.treegrid('expand', selectedRow.id);
        } else if (selectedRow.state == 'open') {//折叠
            $grid.treegrid('collapse', selectedRow.id);
        }
    }

    //是否为叶子节点
    function isLeaf() {
        let selectedRow = $grid.treegrid('getSelected');
        let children = $grid.treegrid('getChildren', selectedRow.id);

        if (children && children.length === 0) {
            alert("children==" + JSON.stringify(children) + "  是叶子节点");
            return true;
        } else {
            alert("children==" + JSON.stringify(children) + "\n\n不是叶子节点");
            return false;
        }
    }

    //添加子节点
    function appendNode() {
        let selectedRow = $grid.treegrid('getSelected');
        $.ajax({
            url: 'menu/listChildNodes',
            data: {parentId: selectedRow.id},
            success: function (res) {
                $grid.treegrid('append', {
                    parent: selectedRow.id,
                    data: res.extend.menus
                });

                $grid.treegrid('expand', selectedRow.id);
            },
            dataType:'json'
        })
    }

    //移除子节点
    function removeNode() {
        let selectedRow = $grid.treegrid('getSelected');
        if (isLeaf()) {//如果是叶子节点, 我们就删除
            $grid.treegrid('remove', selectedRow.id);
        }
    }
</script>
</body>
</html>
